<template>
  <div style="width:100%;height:100%">
    <template v-if="isMain">
      <div class="w-100 flex" style="height:84.9%;margin: 0 1%;">
        <div class="h-100 flex-column justify-between" style="width:25%">
          <div data-bottom class="h-33">
            <page-header text="农业技术相关机构" :ph="270"> <v-chart ref="nyjsxgjg" :options="histogram" /> </page-header>
          </div>
          <div data-bottom class="h-33">
            <page-header text="在研项目" :ph="270">
              <!-- <yl-table :table-columns="table.columns" :url="table.url" /> -->
              <v-chart :options="optionZYXM" :theme="theme" />
            </page-header>
          </div>
          <div data-bottom class="h-33">
            <page-header text="农业标准规范" :ph="270">
              <!-- <yl-table :table-columns="table_2.columns" :url="table_2.url" /> -->
              <v-chart :options="optionNYBZGF" :theme="theme" />
            </page-header>
          </div>
        </div>
        <div style="width:1%" />
        <div class="h-100 flex-column justify-between" style="width:44%">
          <div data-bottom class="position-relative" style="height:66%; padding: 2px;">
            <div id="container" style="height: 100%" />
            <div class="map-legend">
              <div v-for="item in imgList" :key="item.color" class="flex map-legend-item">
                <div class="map-legend-color">
                  <img :src="item.url" alt="" />
                </div>
                <div class="">{{ item.type }}</div>
              </div>
            </div>
          </div>
          <div data-bottom style="height:32%" class="h-100 flex justify-between">
            <div style="width:48%" class="h-100">
              <page-header text="农业科技人才" :ph="270">
                <!-- <yl-table :table-columns="table_3.columns" :url="table_3.url" /> -->
                <v-chart ref="nykjrc" :is-show="optionNYKJRC.isShow" :options="optionNYKJRC" />
              </page-header>
            </div>
            <div style="width:48%" class="h-100">
              <page-header text="农业图谱" :ph="270"><v-chart :is-show="hotWordsList.isShow" :options="hotWordsList"/></page-header>
            </div>
          </div>
        </div>
        <div style="width:1%" />
        <div class="h-100 flex-column justify-between" style="width:25%">
          <div data-bottom class="h-33">
            <page-header text="农业专家" :ph="270"> <v-chart ref="nyzj" :is-show="tortadiagram.isShow" :options="tortadiagram"/></page-header>
          </div>
          <div data-bottom class="h-33">
            <page-header text="知识产权及专利" :ph="270">
              <v-chart v-if="category2.isShow" ref="zscpjzl" :theme="theme" :options="category2" />
            </page-header>
          </div>
          <div data-bottom class="h-33">
            <page-header text="农技成果" :ph="270">
              <v-chart v-if="category3.isShow" ref="zscpjzl" :theme="theme" :options="category3" />
            </page-header>
          </div>
        </div>
      </div>
      <div style="height:2.1%" />
    </template>
    <router-view v-else class="h-87" />
    <Particulars />
  </div>
</template>

<script>
import echarts from 'echarts'
import AMap from '@/utils/AMap'
import YlCharts from '@/components/Charts/ylCharts.vue'
import Particulars from 'header/particulars.vue'
import PageHeader from 'header/PageHeader.vue'
import theme from '@/utils/echarts-theme.json'
import YlTable from 'header/yltable'
import('echarts-wordcloud')
import { createInfoWindow, formatNumber } from '@/utils/app'
import { agricultural, getTowSideStat, getSingleValue, hotWords } from '@/api/connector'
export default {
  name: 'ScienceTechnology',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    YlCharts,
    Particulars,
    // eslint-disable-next-line vue/no-unused-components
    PageHeader,
    YlTable
  },
  data() {
    return {
      isShow: false,
      isShow1: false,
      theme: theme,
      map: null,
      amap: '',
      infoWindow: null,
      p1: null,
      p2: null,
      showIndex: 0,
      mapData: [],
      time: null,
      agriOperNormList: [],
      agriTechPrizeList: [],
      agriTechTalentList: [],
      inlandAgrictprojectList: [],
      hotWordsList: {
        isShow: false,
        tooltip: {
          show: true,
          position: 'top',
          textStyle: {
            fontSize: 30
          }
        },
        series: [
          {
            type: 'wordCloud',
            // 网格大小，各项之间间距
            gridSize: 30,
            // 形状 circle 圆，cardioid  心， diamond 菱形，
            // triangle-forward 、triangle 三角，star五角星
            shape: 'circle',
            // 字体大小范围
            sizeRange: [20, 50],
            // 文字旋转角度范围
            rotationRange: [0, 0],
            // 旋转步值
            rotationStep: 0,
            // 自定义图形
            // maskImage: maskImage,
            left: 'center',
            top: 'center',
            right: null,
            bottom: null,
            // 画布宽
            width: '90%',
            // 画布高
            height: '80%',
            // 是否渲染超出画布的文字
            drawOutOfBound: false,
            textStyle: {
              normal: {
                color: function() {
                  return (
                    'rgb(' +
                    [Math.round(Math.random() * 200 + 55), Math.round(Math.random() * 200 + 55), Math.round(Math.random() * 200 + 55)].join(',') +
                    ')'
                  )
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: '#2ac'
              }
            },
            data: []
          }
        ]
      },
      category2: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          },
          // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
          formatter: function(params, ticket, callback) {
            var htmlStr = ''
            for (var i = 0; i < params.length; i++) {
              var param = params[i]
              var xName = param.name // x轴的名称
              var seriesName = param.seriesName // 图例名称
              var value = param.value // y轴值
              var color = param.color // 图例颜色
              if (i === 0) {
                htmlStr += xName + '<br/>' // x轴的名称
              }
              htmlStr += '<div>'
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>'
              htmlStr += seriesName + '：' + formatNumber(value) + '个' // 圆点后面显示的文本
              htmlStr += '</div>'
            }
            return htmlStr
          }
        },
        legend: {
          data: []
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
        ],
        yAxis: [
          {
            name: '个',
            type: 'value'
          }
        ],
        series: [
          {
            name: '',
            type: 'line',
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      },
      category3: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          },
          // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
          formatter: function(params, ticket, callback) {
            var htmlStr = ''
            for (var i = 0; i < params.length; i++) {
              var param = params[i]
              var xName = param.name // x轴的名称
              var seriesName = param.seriesName // 图例名称
              var value = param.value // y轴值
              var color = param.color // 图例颜色
              if (i === 0) {
                htmlStr += xName + '<br/>' // x轴的名称
              }
              htmlStr += '<div>'
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>'
              htmlStr += seriesName + '：' + formatNumber(value) + '个' // 圆点后面显示的文本
              htmlStr += '</div>'
            }
            return htmlStr
          }
        },
        legend: {
          data: []
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
        ],
        yAxis: [
          {
            name: '个',
            type: 'value'
          }
        ],
        series: [
          {
            name: '',
            type: 'line',
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      },
      tortadiagram: {
        isShow: false,
        tooltip: {
          trigger: 'item',
          // formatter: '{a} <br/>{b}: {c}位 ({d}%)'
          formatter: function(params) {
            var result = ''
            return (result = params.marker + params.name + ' : ' + formatNumber(params.value) + '位  ' + params.percent + ' %</br>')
          }
        },
        legend: {
          orient: 'vertical',
          right: 50,
          top: 0,
          data: []
        },
        series: [
          {
            name: '农业专家',

            center: ['30%', '50%'],
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'bottom',
              offset: [0, 50],
              formatter: function(params) {
                // if (params.name !== '') {
                //   // return params.name + '\n' + '(' + params.percent + '%)'
                //   return formatNumber(params.value) + ' 位'
                // } else {
                //   return ''
                // }

                return params.percent + '%'
              }
            },
            labelLine: {
              show: true
            },
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' }
            ]
          }
        ]
      },
      histogram: {
        isShow: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
          formatter: function(params, ticket, callback) {
            var htmlStr = ''
            for (var i = 0; i < params.length; i++) {
              var param = params[i]
              var xName = param.name // x轴的名称
              var seriesName = param.seriesName // 图例名称
              var value = param.value // y轴值
              var color = param.color // 图例颜色
              if (i === 0) {
                htmlStr += xName + '<br/>' // x轴的名称
              }
              htmlStr += '<div>'
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>' //一个点
              htmlStr += seriesName + '：' + formatNumber(value) + '家' // 圆点后面显示的文本
              htmlStr += '</div>'
            }
            return htmlStr
          }
        },
        legend: {
          textStyle: {
            color: '#fff'
          },
          data: ['可用余额', '不可用余额', '收入', '支出']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          data: []
        },
        yAxis: {
          name: '家',
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          splitLine: {
            // 分割线配置
            lineStyle: {
              color: '#AAAAAA56'
            }
          }
        },
        series: []
      },
      imgList: [
        {
          url: require('./../../../assets/img/map/1.png'),
          type: '农技站'
        },
        {
          url: require('./../../../assets/img/map/2.png'),
          type: '农科企业'
        },
        {
          url: require('./../../../assets/img/map/3.png'),
          type: '科研院所'
        },
        {
          url: require('./../../../assets/img/map/4.png'),
          type: '现代产业园'
        }
      ],
      table: {
        url: '/cybd/api/agri/inlandAgrictproject/queryList',
        columns: [
          // {
          //   prop: 'mnufacturers',
          //   label: '生产厂商'
          // },
          // {
          //   prop: 'productSpecifications',
          //   label: '产品规格'
          // },
          {
            prop: 'bearUnit',
            label: '承担单位'
          },
          {
            prop: 'searcher',
            label: '研究人员'
          }
        ]
      },
      table_2: {
        url: '/cybd/api/agri/agriOperNorm/queryList',
        columns: [
          {
            prop: 'normName',
            label: '标准名称'
          },
          {
            prop: 'normType',
            label: '标准类型'
          }
        ]
      },
      table_3: {
        url: '/cybd/api/agri/agriTechTalent/queryList',
        columns: [
          {
            prop: 'name',
            label: '姓名'
          },
          {
            prop: 'location',
            label: '所在地'
          },
          {
            prop: 'major',
            label: '专业'
          },
          {
            prop: 'jobTitle',
            label: '职称'
          }
        ]
      },
      table_4: {
        limit: 2,
        url: '/cybd/api/agri/agriTechPrize/queryList',
        columns: [
          {
            prop: 'resultRegistTime',
            label: '完成时间'
          },
          {
            prop: 'firstAchieveUnit',
            label: '第一完成单位'
          }
        ]
      },
      optionZYXM: {
        title: {
          //   text: '农产品劳动力需求分析'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          },
          // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
          formatter: function(params, ticket, callback) {
            var htmlStr = ''
            for (var i = 0; i < params.length; i++) {
              var param = params[i]
              var xName = param.name // x轴的名称
              var seriesName = param.seriesName // 图例名称
              var value = param.value // y轴值
              var color = param.color // 图例颜色
              if (i === 0) {
                htmlStr += xName + '<br/>' // x轴的名称
              }
              htmlStr += '<div>'
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>'
              htmlStr += seriesName + '：' + formatNumber(value) + '个' // 圆点后面显示的文本
              htmlStr += '</div>'
            }
            return htmlStr
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {},
        xAxis: {
          type: 'category',
          boundaryGap: false, // 坐标轴两边留白
          axisLine: {
            lineStyle: {
              color: '#E9F7FF',
              width: 1
            }
          },
          data: []
        },
        yAxis: [
          {
            type: 'value',
            name: '个',
            axisLine: {
              lineStyle: {
                color: '#E9F7FF',
                width: 1
              }
            },
          }
        ],
        series: [
          {
            name: '',
            areaStyle: {},
            type: 'line',
            data: []
          }
        ]
      },
      optionNYBZGF: {
        tooltip: {
          trigger: 'axis',
          formatter: '{b}<br />{a}:{c}个'
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false, // 坐标轴两边留白
          data: []
        },
        yAxis: [
          {
            type: 'value',
            name: '个',
            splitNumber: 5
          }
        ],
        series: [
          {
            name: '',
            type: 'line',
            areaStyle: {},
            itemStyle: {
              normal: {
                color: '#6647FF',
                lineStyle: {
                  color: '#6647FF',
                  width: 1
                },
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: '#6647FF'
                    },
                    {
                      offset: 1,
                      color: '#6647FF'
                    }
                  ])
                }
              }
            },
            data: []
          }
        ]
      },
      optionNYKJRC: {
        title: {
          //   text: '农产品劳动力需求分析'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          },
          // formatter: '{b}<br />{a2}:{c2}%<br />{a1}:{c1}%<br />{a0}:{c0}%'
          formatter: function(params, ticket, callback) {
            var htmlStr = ''
            for (var i = 0; i < params.length; i++) {
              var param = params[i]
              var xName = param.name // x轴的名称
              var seriesName = param.seriesName // 图例名称
              var value = param.value // y轴值
              var color = param.color // 图例颜色
              if (i === 0) {
                htmlStr += xName + '<br/>' // x轴的名称
              }
              htmlStr += '<div>'
              htmlStr +=
                '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>'
              htmlStr += seriesName + '：' + formatNumber(value) + '个' // 圆点后面显示的文本
              htmlStr += '</div>'
            }
            return htmlStr
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {},
        xAxis: {
          type: 'category',
          boundaryGap: false, // 坐标轴两边留白
          data: [],
          axisTick: {
            // 坐标轴刻度相关设置。
            show: false
          },
          splitLine: {
            // 坐标轴在 grid 区域中的分隔线。
            show: false,
            lineStyle: {
              color: '#E5E9ED'
              // 	opacity:0.1
            }
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '位',
            splitNumber: 5
          }
        ],
        series: [
          {
            name: '',
            type: 'line',
            smooth: true,
            itemStyle: {
              normal: {
                color: '#19C4A1',
                lineStyle: {
                  color: '#19C4A1',
                  width: 1
                },
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: '#19C4A1'
                    },
                    {
                      offset: 1,
                      color: '#19C4A1'
                    }
                  ])
                }
              }
            },
            data: []
          }
        ]
      }
    }
  },
  computed: {
    isMain() {
      return this.$route.name === 'science-technology'
    }
  },
  beforeDestroy() {
    clearTimeout(this.time)
  },
  mounted() {
    this.$nextTick(() => {
      this.initAMap()
      this.agricultural()
      this.drawMarker()
    })
  },
  created() {
    this.init()
  },

  methods: {
    init() {
      // 农业图谱
      hotWords({ type: 'NYTP' }).then((res) => {
        this.hotWordsList.series[0].data = res.body.data.map((item, index) => {
          return {
            name: item.name,
            value: item.number
          }
        })
        this.hotWordsList.isShow = true
      })
      getSingleValue({
        groupCode: 'NYZJ'
      }).then((res) => {
        this.tortadiagram.legend.data = res.body.names
        this.tortadiagram.series[0].data = []
        // eslint-disable-next-line no-undef
        var i = 0
        var series = []
        for (i = 0; i < res.body.names.length; i++) {
          var item = {
            name: res.body.names[i],
            value: res.body.values[i]
          }
          series.push(item)
        }
        this.tortadiagram.series[0].data = series
        this.tortadiagram.isShow = true
        this.toLink(this, 'nyzj', (params) => {
          this.$router.push({ name: 'Fourstage', query: { code: '000103', typeCode: '农业专家数', name: 'industrial-base' } })
        })
      })
      // 知识产品及专利
      getTowSideStat({ groupCode: 'ZSCPJZL' }).then((res) => {
        console.log(res.body)
        this.category2.xAxis[0].data = res.body.dateSet
        this.category2.legend.data = res.body.typeSet
        var obj = res.body.typeValueListMap
        var key = []
        var value = []
        for (var i in obj) {
          key.push(i)
          value.push(obj[i])
        }
        this.category2.series[0].data = value[0]
        this.category2.series[0].name = key[0]
        this.category2.isShow = true
        this.toLink(this, 'zscpjzl', (params) => {
          this.$router.push({ name: 'Fourstage', query: { code: '000103', typeCode: '农业技术专利数', name: 'industrial-base' } })
        })
      })
      getTowSideStat({ groupCode: 'NJCG' }).then((res) => {
        this.category3.xAxis[0].data = res.body.dateSet
        this.category3.legend.data = res.body.typeSet
        var obj = res.body.typeValueListMap
        var key = []
        var value = []
        for (var i in obj) {
          key.push(i)
          value.push(obj[i])
        }
        this.category3.series[0].data = value[0]
        this.category3.series[0].name = key[0]
        this.category3.isShow = true
      })
      // 农业技术相关机构，，
      getTowSideStat({ groupCode: 'NYJSXGJG' }).then((res) => {
        const val = res.body
        const histogram = this.histogram
        histogram.xAxis.data = val.dateSet
        histogram.legend.data = val.typeSet
        Object.keys(val.typeValueListMap).forEach((item, index) => {
          histogram.series.push({
            name: item,
            type: 'bar',
            barMaxWidth: 30,
            stack: '余额',
            data: val.typeValueListMap[item]
          })
        })
        this.histogram.isShow = true
        this.toLink(this, 'nyjsxgjg', (params) => {
          console.log(params)
          if (params.seriesName === '科研院所') {
            this.$router.push({ name: 'Fourstage', query: { code: '000103', typeCode: '科研院所数', name: 'industrial-base' } })
          }
          if (params.seriesName === '农技站') {
            this.$router.push({ name: 'Fourstage', query: { code: '000103', typeCode: '农技站数', name: 'industrial-base' } })
          }
          if (params.seriesName === '科技企业') {
            this.$router.push({ name: 'Fourstage', query: { code: '000103', typeCode: '农业科技企业数', name: 'industrial-base' } })
          }
        })
      })

      // 在研项目数量
      getTowSideStat({ groupCode: 'ZYXMSL' }).then((res) => {
        const val = res.body
        this.optionZYXM.xAxis.data = val.dateSet
        this.optionZYXM.series[0].name = '在研项目数量'
        this.optionZYXM.series[0].data = val.typeValueListMap['项目类型名称']
      })

      // 农业标准规范
      getTowSideStat({ groupCode: 'NYBZGFSL' }).then((res) => {
        const val = res.body
        this.optionNYBZGF.xAxis.data = val.dateSet
        this.optionNYBZGF.series[0].name = '农业标准规范数量'
        this.optionNYBZGF.series[0].data = val.typeValueListMap['规范类型名称']
      })

      // 农业科技人才
      getTowSideStat({ groupCode: 'NYKJRCSL' }).then((res) => {
        const val = res.body
        this.optionNYKJRC.xAxis.data = val.dateSet
        this.optionNYKJRC.series[0].name = '农业科技人才'
        this.optionNYKJRC.series[0].data = val.typeValueListMap['专业名称名称']
      })
    },
    async initAMap() {
      try {
        this.amap = await AMap()
        this.p1 = new Promise((resolve, reject) => {
          this.map = new this.amap.Map('container', {
            amapizeEnable: true, // 是否监控地图容器尺寸变化
            zoom: 14, // 初始化地图层级
            mapStyle: 'amap://styles/fa9f091b73ec8e37b8b84784a4791559', // 地图样式
            // center: [108.096154, 34.264296] // 初始化地图中心点
            center: [108.096963, 34.263525] // 初始化地图中心点
          })
          resolve(this.map)
        })
      } catch (err) {
        console.error(err)
      }
    },
    drawMarker() {
      Promise.all([this.p1, this.p2])
        .then((result) => {
          this.addMarker(result[1])
        })
        .catch((error) => {
          console.log(error)
        })
    },
    addMarker(data) {
      const self = this
      // 添加点
      data.map((item) => {
        const coordinate = JSON.parse(item.coordinate)
        let url = ''
        this.imgList.map((d) => {
          if (d.type === item.type) {
            url = d.url
          }
        })
        const marker = new this.amap.Marker({
          map: this.map,
          icon: url,
          position: [coordinate.lng, coordinate.lat]
        })
        self.mapData.push({
          position: [coordinate.lng, coordinate.lat],
          data: item
        })
        marker.on('click', function(e) {
          self.openInfo(e, item)
        })
      })
      self.setMapCenter()
    },
    setMapCenter() {
      const self = this
      this.time = setTimeout(() => {
        self.map.setCenter(self.mapData[self.showIndex].position)
        const lnglat = self.mapData[self.showIndex].position
        self.openInfo({ lnglat }, self.mapData[self.showIndex].data)
        if (self.showIndex === self.mapData.length - 1) {
          self.showIndex = 0
        } else {
          self.showIndex++
        }
        self.setMapCenter()
      }, 8000)
    },
    openInfo(e, item) {
      const self = this
      const title = '详情'
      const content = []
      const mainProducts = item.mainProducts === '' ? '无' : item.mainProducts
      content.push('<div class="flex"><div class="w-80">名称:</div><div>' + item.name + '</div></div>')
      content.push('<div class="flex"><div class="w-80">地址:</div><div>' + item.address + '</div></div>')
      content.push('<div class="flex"><div class="w-80">类型:</div><div>' + item.type + '</div></div>')
      content.push('<div class="flex"><div class="w-80">主营产品:</div><div>' + mainProducts + '</div></div>')
      content.push('<div class="flex"><div class="w-80">负责人:</div><div>' + item.chargePerson + '</div></div>')
      content.push('<div class="flex"><div class="w-80">联系电话:</div><div>' + item.contactNumber + '</div></div>')
      this.infoWindow = new this.amap.InfoWindow({
        isCustom: true, // 使用自定义窗体
        content: createInfoWindow(title, content.join('<br/>'), self.map),
        offset: new this.amap.Pixel(16, -45)
      })
      this.infoWindow.open(this.map, e.lnglat)
    },
    agricultural(item) {
      this.p2 = new Promise((resolve, reject) => {
        agricultural().then((res) => {
          resolve(res.body.data)
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.h-33 {
  height: 32%;
}
.amap-container {
  background: none !important;
}
div[data-bottom] {
  background: url(~@/assets/img/bottom-box.png) no-repeat;
  background-size: 100% 100% !important;
}
.h-24 {
  height: 23.2%;
}

.w-80 {
  width: 80px;
}
.h-33 {
  height: 32%;
}
div[data-bottom] {
  background: url(~@/assets/img/gradients-right.png) no-repeat;
  background-size: 100% 100% !important;
}
.h-24 {
  height: 23.2%;
}

.map-legend {
  padding: 20px 20px 10px 10px;
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 1000;
  color: #fff;
  border: solid 1px #5c6d7c;
  background: rgba(18, 33, 53, 0.8);
  border-radius: 4px;
}
.map-legend-color {
  width: 34px;
  height: 37px;
  margin-right: 10px;
  margin-top: -10px;
}
.map-legend-color img {
  width: 100%;
  height: 100%;
}
.map-legend-item {
  margin-bottom: 8px;
}
.map-legend-item:last-child {
  margin-bottom: 0;
}
</style>
